<template>
  <div>
    <van-popover
      v-model:show="showPopover"
      placement="left"
      trigger="click"
      theme="dark"
    >
      <div class="flex flex-col gap-2 p-2">
        <button
          class="text-white text-left px-2 py-1 hover:bg-gray-700 rounded whitespace-nowrap"
          @click="handleOption1"
        >
          红包记录
        </button>
        <button
          class="text-white text-left px-2 py-1 hover:bg-gray-700 rounded whitespace-nowrap"
          @click="handleOption2"
        >
          投诉建议
        </button>
      </div>
      <template #reference>
        <button
          class="px-2 py-2 rounded-full transition"
          :class="
            styleMode === 'cover'
              ? 'bg-gray-600 text-white hover:bg-gray-700'
              : 'bg-gray-600 text-white hover:bg-gray-700'
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
            />
          </svg>
        </button>
      </template>
    </van-popover>

    <!-- Red Packet List Component -->
    <RedPacketList v-model="showRedPacketList" />

    <!-- Complaint Form Component -->
    <ComplaintForm v-model="showComplaintForm" @submit="handleSubmit" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import RedPacketList from "./RedPacketList.vue";
import ComplaintForm from "./ComplaintForm.vue";
import { useCourseData } from "@/store/useCourse";
import { showFailToast, showSuccessToast } from "vant";
const courseStore = useCourseData();
const props = defineProps(["styleMode"]);
const showPopover = ref(false);
const showRedPacketList = ref(false);
const showComplaintForm = ref(false);
const handleSubmit = async e => {
  const data = await courseStore.addComplain({
    ...e,
    complaintsType: courseStore.courseData.roomType,
    ...courseStore.roomParams
  });
  showComplaintForm.value = false;
  showSuccessToast("提交成功");
};
const handleOption1 = () => {
  showPopover.value = false;
  showRedPacketList.value = true;
};

const handleOption2 = () => {
  showPopover.value = false;
  showComplaintForm.value = true;
};
</script>

<style scoped>
.interaction-menu {
  /* Your styles here */
}
</style>
